<template>
  <div class="routeBg">
    <div class="routeBgOpacity" @click="cancel"></div>
    <div class="routeBgDivIntro">
      <div class="closeImgDiv" @click="cancel"><img src="/static/images/share1/openreapack1.png"></div>
      <div class="routeBgDivImg"><img src="/static/images/share1/openreapack3.png"></div>
      <div class="routeBgDivTxt">
        <div class="userHeader" v-if="shareuser.avatar"><img :src="shareuser.avatar"></div>
        <div class="userName" v-if="shareuser.nickName">{{shareuser.nickName}}</div>
        <div class="usertxt">分享了一个红包，美豆随机</div>
        <h3>恭喜发财，大吉大利</h3>
        <div class="userredpack" @click="openRedPacket"><img src="/static/images/share1/openreapack2.png"></div>
        <div class="lookRecord" @click="torecord">查看我的奖池记录&nbsp;></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props:{
      orderNum:{ //订单号
        type: String,
      },
      num:{//你点击的是哪一个红包
        type: String,
      },
      pagetype:{//是分享进入的还是分享后进入的
        type: String,
      },
      shareuser: {//分享者的名字和头像
        type: Object,
      }
    },
    methods:{
      cancel(){
        this.$emit("cancelopenpage",false)
      },
      torecord(){
        const url = '../integral-record/main';
        wx.navigateTo({ url })
      },
      openRedPacket(num){ //打开红包
        this.$http.get(`bargains/${this.orderNum}/helpCutPrice/${this.num}`).then((data)=>{ 
          if(data.data.code === 3){
            this.wxAlert("您已经抓过了哟")
            setTimeout(() => {
              this.$emit("cancelrefresh",false)
            }, 2000);
          }else if(data.data.code === 2){
            this.wxAlert("客官，请下次早点额")
            setTimeout(() => {
              this.$emit("cancelrefresh",false)
            }, 2000);
          }else if(data.data.code === 4){
            this.wxAlert("该红包已被别人拆开了~")
            setTimeout(() => {
              this.$emit("cancelrefresh",false)
            }, 2000);
          }else if(data.data.code === 5){
            this.wxAlert("红包已过期")
            setTimeout(() => {
              this.$emit("cancelrefresh",false)
            }, 2000);
          }else if(data.data.code === 6){
            this.wxAlert("分享已经结束了")
            setTimeout(() => {
              this.$emit("cancelrefresh",false)
            }, 2000);
          }else{
            this.$emit("havaopend",num)
            const url = `../openredpack/main?pagetype=${this.pagetype}&shareuserImg=${this.shareuser.avatar}&shareuserName=${this.shareuser.nickName}&orderNum=${this.orderNum}`;
            wx.navigateTo({ url })
          }
        })
      },
      wxAlert(txt){
        wx.showToast({
            title: txt,
            icon: "none",
            duration: 2000,
            mask: true
        })
      },
    }
  }
</script>
<style scoped>
img{
  width: 100%;
  height: 100%;
  display: block;
}
.routeBg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 101; 
}
.routeBg .routeBgOpacity{
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0.6;
  position: relative;
  z-index: 1;
}
 .routeBg  .routeBgDivIntro{
  position: absolute;
  z-index: 2;
  width: 610rpx;
  height: 747rpx;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.routeBg .routeBgDivIntro .closeImgDiv{
  width: 32rpx;
  height: 32rpx;
  position: absolute;
  top: 30rpx;
  left: 30rpx;
}
.routeBg .routeBgDivIntro .routeBgDivImg{
  width: 610rpx;
  height: 747rpx;
}
.routeBg .routeBgDivIntro .routeBgDivTxt{
  position: absolute;
  top: 80rpx;
  width: 100%;
  color:#FBE1B0;
  font-size: 30rpx;
  text-align: center;
  overflow: hidden;
}
.routeBg .routeBgDivIntro .routeBgDivTxt .userHeader{
  width: 90rpx;
  height: 90rpx;
  margin: 0 auto;
}
.routeBg .routeBgDivIntro .routeBgDivTxt .userName{
  margin: 15rpx 0;
  padding: 0 15rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.routeBg .routeBgDivIntro .routeBgDivTxt h3{
  font-size: 50rpx;
  margin: 40rpx 0;
}
.routeBg .routeBgDivIntro .routeBgDivTxt .userredpack{
  width: 157rpx;
  height: 157rpx;
  margin: 0 auto 75rpx;
}
.routeBg .routeBgDivIntro .routeBgDivTxt .lookRecord{
  font-size: 28rpx;
}
</style>
